import classNames from 'classnames'
import './index.scss'
import { useMemo, useState } from 'react'
import {billTypeToName} from '@/contants/index.js'
import Icon from '@/components/Icon'

const DailyBill = ({data,dayBillList}) => {
  // console.log(dayBillList)
  // 1、通过数组获取账单信息
  const billResult = useMemo(() => {
    if(!dayBillList) {
      return {
        pay:0,
        income:0,
        total:0
      }
    }
    const pay = dayBillList.filter(item => item.type==="pay").reduce((sum,item)=> sum+item.money,0)
    const income = dayBillList.filter(item => item.type==="income").reduce((sum,item)=> sum+item.money,0)
    return {
      pay,
      income,
      total:pay+income
    }
  },[dayBillList])
  // 2、控制详细花费的显示与隐藏
  const [visible,setVisible] = useState(false)
  return (
    <div className={classNames('dailyBill')}>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{data}</span>
          <span className={classNames('arrow',visible && 'expand')} onClick={() => setVisible(!visible)}></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{billResult.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{billResult.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{billResult.total.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
      {/* 单日列表 */}
      <div className="billList" style={{display:visible?'block':'none'}}>
        {dayBillList.map(item => {
          return (
            <div className="bill" key={item.id}>
              <Icon type={item.useFor}/>
              <div className="detail">
                <div className="billType">{billTypeToName[item.useFor]}</div>
              </div>
              <div className={classNames('money', item.type)}>
                {item.money.toFixed(2)}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
export default DailyBill